<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import {
    User,
    Lock,
    ArrowDown,
    ArrowUp,
} from '@element-plus/icons-vue'
import { login } from '../network/login.js'
// 引入路由
import { useRouter } from 'vue-router'
import chun from '../stores/chun.js'

let allUser = localStorage.getItem('allUser')
let userData = JSON.parse(allUser)

// console.log(userData);

onMounted(() => {
    // 获取本地存储的用户信息
    let userInfo = localStorage.getItem('userInfo')
    let data = JSON.parse(userInfo)
    // 填充form
    form.username = data?.username
    form.password = data?.password
    // if (userInfo) {
    //     chun.userInfo = JSON.parse(userInfo)
    //     let { role } = chun.userInfo
    //     if (role == 'jh') {
    //         router.push('/input')
    //     } else {
    //         router.push('/info')
    //     }
    // }
})


// 路由实例
const router = useRouter()
const form = reactive({
    username: '',
    password: ''
})

const handleLogin = () => {
    // 跳转到首页
    login(form).then(res => {
        if (res.data.code == 200) {
            chun.userInfo = res.data.data
            // chun.userInfo存到本地
            localStorage.setItem('userInfo', JSON.stringify(chun.userInfo))
            let allUser = localStorage.getItem('allUser')
            if (allUser) {
                let data = JSON.parse(allUser)
                let flag = data.some(item => item.username == chun.userInfo.username)
                if (!flag) {
                    data.push(chun.userInfo)
                    localStorage.setItem('allUser', JSON.stringify(data))
                }
            } else {
                localStorage.setItem('allUser', JSON.stringify([chun.userInfo]))
            }

            let { role } = chun.userInfo
            if (role == 'jh') {
                router.push('/input')
            } else {
                router.push('/info')
            }
        } else {
            alert('用户名或密码错误')
        }
    }).catch(err => {
        console.log(err)
    })


}

const isOld = ref(false)

const handleOld = () => {
    isOld.value = !isOld.value
}

const getRole = (role) => {
    if (role == 'jh') {
        return '稽核'
    } else if (role == 'ym') {
        return '渔民'
    } else {
        return '管理员'
    }
}

const handleOldSelect = (item) => {
    form.username = item.username
    form.password = item.password
    isOld.value = false
}
</script>

<template>
    <div id="login">
        <section class="login_s1">
            <img src="../assets/img/title.png" />
            <span>浒苔稽核小助手</span>
            <!-- <div class="lrd">
                <span>录入端</span>
            </div> -->
        </section>
        <section class="login_s2">
            <!-- 使用element ui 输入框前添加图标 -->
            <el-input class="iii jjj" v-model="form.username" placeholder="请输入用户名" :prefix-icon="User">
                <template #append>
                    <el-button :icon="isOld ? ArrowUp : ArrowDown" @click="handleOld" />
                </template>
            </el-input>
            <el-input class="iii" v-model="form.password" placeholder="请输入密码" :prefix-icon="Lock"
                show-password></el-input>
            <!-- 显示已经登陆过的账号 -->
            <div id="old_info" v-show="isOld">
                <div v-for="item in userData" class="iii o_a" @click="handleOldSelect(item)"
                    style="height: 30px;display: flex;">
                    <span>{{ item.username }}</span>
                    <span style="margin-left: auto;margin-right: 10px;" class="o_role">{{ getRole(item.role) }}</span>
                </div>
            </div>
            <!-- 提交按钮 -->
            <button class="iii iiib" @click="handleLogin" style="width: calc(100% - 20px);">
                <span>
                    登录
                </span>
            </button>
        </section>





    </div>
</template>

<style lang="less" scoped>
#login {
    height: 100vh;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    padding: 50px 15px 0 15px;

    .login_s1 {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 30px;

        img {
            position: absolute;
            left: 20px;
        }

        span {
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 28px;
            font-family: SourceHanSansCN-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 41px;
        }

        .lrd {
            background-color: rgba(10, 188, 167, 1);
            margin: 12px 0 13px 0;
            padding: 3px 5px 3px 5px;

            span {
                height: 12px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 14px;
            }
        }
    }

    .login_s2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        :deep(.el-input__wrapper) {
            background-color: #F6F6F8;
            border: none;
            // border-radius: 7px;
        }

        #old_info {
            width: calc(100% - 50px);
            // margin-top: 20px;
            position: fixed;
            top: 190px;
            max-height: 180px;
            // height: 200px;
            background-color: rgb(255, 255, 255);
            border-radius: 4px;
            z-index: 999;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border: 1px solid #ebeef5;
            padding: 0px 10px;
            overflow: auto;

            .o_a {
                // 灰色虚线分割
                border-bottom: 1px dashed #d8deeb;
            }

            .o_role {
                color: #00BEA4;
                font-size: 14px;
            }
        }



        .iii {
            width: 100%;
            height: 50px;
            margin: 15px 0;
            padding: 0 10px;
            border: none;
            // border-radius: 7px;
            box-sizing: border-box;
        }


        .iiib {
            span {
                width: 32px;
                height: 24px;
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
                line-height: 24px;
                text-align: left;
                font-style: normal;
            }

            background-color: #00BEA4;
            margin-top: 30px;
        }
    }
}
</style>